<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法口诀</title>
    <style>
        .td{
            width: 80px;
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    
    <script>
        //在body中添加一个<table></table>

        //document:文档对象
        //createElement():该方法用于创建标签对象，并且会把标签对象返回出去。
        var table = document.createElement('table');

        //document.body：获取到body这个标签对象。
        //appendChild():该方法用于将标签拼接到指定位置。
        document.body.appendChild(table);
        
        for(var x = 1; x < 10;x++){
            //外层for循环，控制了行数

            //insertRow():该方法可以直接往table中插入一个tr，
            // 并且会把该tr对象返回出来。
            var tr = table.insertRow();

            for(var y = x;y < 10;y++){
                //内层for循环，控制了每一行的列数
                //Cell：细胞，单元格
                //insertCell():往tr中插入td，并将td对象返回出来。
                var td = tr.insertCell();

                //innerText:该属性表示往标签内部插入文本内容。
                td.innerText = x + "*" + y + "=" + x*y;

                //给td加行内样式，设置宽度
                // td.style.width = "80px";
                
                //给td标签加class
                td.className = 'td';

                console.log(x + "*" + y + "=" + x*y);
            }
        }

    </script>

</body>
</html>